# -*- coding:utf-8 -*-
from mako import runtime, filters, cache
UNDEFINED = runtime.UNDEFINED
STOP_RENDERING = runtime.STOP_RENDERING
__M_dict_builtin = dict
__M_locals_builtin = locals
_magic_number = 10
_modified_time = 1617787381.7752013
_enable_loop = True
_template_filename = 'D:/boco/project/lj/dev/dm/templates/dm/index.html'
_template_uri = 'dm/index.html'
_source_encoding = 'utf-8'
_exports = []


def render_body(context,**pageargs):
    __M_caller = context.caller_stack._push_frame()
    try:
        __M_locals = __M_dict_builtin(pageargs=pageargs)
        SITE_URL = context.get('SITE_URL', UNDEFINED)
        request = context.get('request', UNDEFINED)
        __M_writer = context.writer()
        __M_writer('<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n    <meta charset="utf-8" />\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1">\r\n    <title>磁盘管理</title>\r\n    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->\r\n    <!-- Bootstrap css -->\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">\r\n    <!-- kendo ui css -->\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">\r\n    <!-- font-awesome -->\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">\r\n    <!--蓝鲸提供的公用样式库 -->\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">\r\n    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">\r\n    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>\r\n    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用\u3000-->\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>\r\n    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用\u3000-->\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>\r\n    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>\r\n    <!-- 数据埋点统计 -->\r\n    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>\r\n    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->\r\n    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->\r\n</head>\r\n\r\n<body class="bg-white" data-bg-color="bg-white">\r\n<div class="king-page-box">\r\n    <div class="king-container clearfix">\r\n\r\n        <nav role="navigation" class="navbar navbar-default king-horizontal-nav3     f14">\r\n            <div class="nav-container">\r\n                <div class="navbar-header">\r\n                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bk-example-navbar-collapse-3">\r\n                        <span class="sr-only">Toggle navigation</span>\r\n                        <span class="icon-bar"></span>\r\n                        <span class="icon-bar"></span>\r\n                        <span class="icon-bar"></span>\r\n                    </button>\r\n                    <a class="navbar-brand" href="javascript:;">\r\n                        <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" alt="" class="logo"> </a>\r\n                </div>\r\n                <div class="collapse navbar-collapse navbar-responsive-collapse" id="bk-example-navbar-collapse-3">\r\n                    <ul class="nav navbar-nav ">\r\n                        <!--<li :class="{\'bk-cur\':item.active}"  v-for="item in renderData.items">-->\r\n                        <li class="bk-cur"> <a href="javascript:void(0);">首页<span></span></a> </li>\r\n                        <li> <a href="javascript:void(0);">图标<span class="caret"></span></a>\r\n                            <ul class="dropdown-menu" role="menu">\r\n                                <li><a href="javascript:void(0);">线性图</a></li>\r\n                                <li><a href="javascript:void(0);">饼状图</a></li>\r\n                                <li><a href="javascript:void(0);">柱形图</a></li>\r\n                            </ul>\r\n                        </li>\r\n                        <li> <a href="javascript:void(0);">个人信息<span></span></a> </li>\r\n                    </ul>\r\n                    <form class="navbar-form navbar-left" role="search">\r\n                        <div class="form-group">\r\n                            <input type="text" class="form-control" placeholder="搜索..."> </div>\r\n                    </form>\r\n                    <ul class="nav navbar-nav navbar-right">\r\n                        <li>\r\n                            <a href="javascript:;">\r\n                                <img src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav3/images/avatar.png" class="avatar">\r\n                                <span>')
        __M_writer(str(request.user.username))
        __M_writer('</span>\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </nav>\r\n        <div class="container-fluid mb0 ">\r\n            <div class="row">\r\n                <div class="col-md-6">\r\n                    <form class="form-horizontal">\r\n                        <div class="king-panel8 m15">\r\n                        <div class="king-panel8-header">\r\n                            <h3 class="king-panel8-title king-info">磁盘容量</h3>\r\n                        </div>\r\n                        <div class="king-panel8-content pt25">\r\n                            <form class="form-vertical p15">\r\n                                <div class="form-group ">\r\n                                    <label>业务选择：</label>\r\n                                    <select id="biz_id" class="form-control">\r\n                                        <option value="业务测试">业务测试</option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class="form-group ">\r\n                                    <label>主机选择：</label>\r\n                                    <select id="ip" class="form-control">\r\n                                        <option value="192.168.11">192.168.11</option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class="form-group ">\r\n                                    <label>任务选择：</label>\r\n                                    <select id="job" class="form-control">\r\n                                        <option value="磁盘负载数据获取">磁盘负载数据获取</option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class="form-group">\r\n                                    <button type="button" class="king-btn mr10  king-success"  onclick="search(this)">提交</button>\r\n                                    <button type="button" class="king-btn king-default ">取消</button>\r\n                                </div>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                </div>\r\n                <div class="col-md-6">\r\n                    <div class="king-panel8 m15">\r\n                        <div class="king-panel8-header">\r\n                            <h3 class="king-panel8-title king-info">历史趋势图</h3>\r\n                        </div>\r\n                        <div class="king-panel8-content pt25">\r\n                            <div style="height: 300px; position: relative;" id="chart_1617326251965" class="king-chart-box chart-line  k-chart" data-role="chart"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div class="panel panel-default mb0">\r\n            <div class="panel-heading"> 磁盘数据 </div>\r\n            <div class="panel-body">\r\n                <table class="table mb0 pr15 ranger-box ">\r\n                    <thead></thead>\r\n                    <tbody>\r\n                    <tr>\r\n                        <td colspan="6"> 没有数据 </td>\r\n                    </tr>\r\n                    </tbody>\r\n                </table>\r\n                <!-- 设置面板Start -->\r\n                <template id="ranger_nodata_tpl">\r\n                    <tr>\r\n                        <td colspan="6"> 没有数据 </td>\r\n                    </tr>\r\n                </template>\r\n                <template id="header_tpl_1526111412901">\r\n                    <tr>\r\n                        <th>Filesystem</th>\r\n                        <th>Size</th>\r\n                        <th>Used</th>\r\n                        <th>Avail</th>\r\n                        <th>Use%</th>\r\n                        <th>Mounted</th>\r\n\r\n                    </tr>\r\n                </template>\r\n                <template id="tpl_1526111412901">\r\n                    <tr>\r\n                        <td>#Filesystem#</td>\r\n                        <td>#Size#</td>\r\n                        <td>#Used#</td>\r\n                        <td>#Avail#</td>\r\n                        <td>#Use%#</td>\r\n                        <td>#Mounted#</td>\r\n                    </tr>\r\n                </template>\r\n                <!-- 下拉框模板 -->\r\n                <template id="app_tpl">\r\n                    <option value="#id#">#name#</option>\r\n                </template>\r\n\r\n                <template id="ip_tpl">\r\n                    <option value="#ip#">#ip#</option>\r\n                </template>\r\n\r\n                <template id="job_tpl">\r\n                    <option value="#job_id#">#job_name#</option>\r\n                </template>\r\n            </div>\r\n        </div>\r\n        <div class="panel panel-default mb0">\r\n            <div class="panel-heading"> 磁盘趋势 </div>\r\n            <div class="panel-body">\r\n                <div class="form-group clearfix ">\r\n                    <label class="col-sm-3 control-label bk-lh30 pt0">选择查看列表：</label>\r\n                    <div class="col-sm-9">\r\n                        <select name="" id="selectIpForChart" class="form-control bk-valign-top">\r\n\r\n\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <button type="button" class="king-btn mr10  king-success" onclick="refresh_chart(this)">刷新图表</button>\r\n\r\n                <div class="king-block-content">\r\n                    <div style="height: 300px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;" id="chart_1530772671783" class="king-chart-box chart-area " _echarts_instance_="1530762106368"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n</body>\r\n<script> //获取级联数据以及对应的表格数据，job执行\r\n\r\n        /*\r\n    * 查询表单级联数据拉取\r\n    */\r\n    function renderTpl(str, cfg) {\r\n        var re = /(#(.+?)#)/g;\r\n\r\n        return str.replace(re, function() {\r\n            var val = cfg[arguments[2]]+\'\';\r\n            if(typeof val == \'undefined\') {\r\n                val = \'\';\r\n            }\r\n            return val;\r\n        });\r\n    }\r\n\r\n    /*\r\n    * 查询表单级联数据拉取\r\n    */\r\n    function select_ip(biz_id){\r\n        //级联选择ip\r\n        $(\'#ip\').html(\'\');\r\n        $.get(\'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/get_ip_by_bizid\', {\'biz_id\': biz_id}, function(data){\r\n            if(data.result){\r\n                var _html = \'\';\r\n                var list = data.data;\r\n                var tpl = $(\'#ip_tpl\').html();\r\n                for (var i=0,len=list.length; i < len; i++){\r\n                    var item = list[i];\r\n                    _html += renderTpl(tpl, item)\r\n                }\r\n                $(\'#ip\').html(_html);\r\n            }else{\r\n                alert("获取失败")\r\n            }\r\n        }, \'json\')\r\n    }\r\n\r\n    function select_job(biz_id){\r\n        //级联选择job\r\n        $(\'#job\').html(\'\');\r\n        $.post(\'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/get_job_list\', {\'biz_id\': biz_id}, function(data){\r\n            if(data.result){\r\n                var _html = \'\';\r\n                var list = data.data;\r\n                var tpl = $(\'#job_tpl\').html();\r\n                for (var i=0,len=list.length; i < len; i++){\r\n                    var item = list[i];\r\n                    _html += renderTpl(tpl, item)\r\n                }\r\n                $(\'#job\').html(_html);\r\n            }else{\r\n                alert("获取失败")\r\n            }\r\n        }, \'json\')\r\n    }\r\n\r\n    /*\r\n    * 表单查询事件提交，获取作业执行结果\r\n    */\r\n    function search(obj){\r\n        var biz_id = $(\'#biz_id\').val();\r\n        var ip = $(\'#ip\').val();\r\n        var job_id = $(\'#job\').val();\r\n        $.get(\'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/execute_job\', {\'biz_id\': biz_id, \'ip\': ip, \'job_id\': job_id}, function(data){\r\n            console.log(data)\r\n            if(data.result){\r\n                var job_instance_id = data.data;\r\n                // 异步请求后台数据\r\n                get_capacity(job_instance_id, biz_id, ip);\r\n            }else{\r\n                alert("获取失败")\r\n            }\r\n        }, \'json\');\r\n    }\r\n\r\n    //获取作业执行结果，渲染表格\r\n    function get_capacity(job_instance_id, biz_id, ip){\r\n        $.ajax({\r\n            url: \'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/get_capacity\',\r\n            type: \'GET\',\r\n            data: {\'biz_id\': biz_id, \'job_instance_id\': job_instance_id, \'ip\': ip},\r\n            dataType: \'json\',\r\n            success: function(res){\r\n                console.log("作业执行的结果"+res);\r\n                var _html = \' \';\r\n                var list = res.data;\r\n\r\n\r\n                if(list.length){\r\n                    getMounted(list);\r\n                    var tpl = $(\'#tpl_1526111412901\').html();\r\n                    var headerTpl =  $(\'#header_tpl_1526111412901\').html();\r\n                    for (var i=0,len=list.length; i < len; i++){\r\n                        var item = list[i];\r\n                        _html += renderTpl(tpl, item)\r\n                    }\r\n                    $(\'.ranger-box thead\').html(renderTpl(headerTpl,res.catalogues));\r\n                }else{\r\n                    _html = $(\'#ranger_nodata_tpl\').html();\r\n                    $(\'.ranger-box thead\').html(\'\');\r\n                    //作业未执行完，则继续轮询获取执行结果\r\n                    setTimeout(function () {get_capacity(job_instance_id, biz_id, ip)}, 1 * 2000)\r\n                }\r\n                $(\'.ranger-box tbody\').html(_html);\r\n            }\r\n        });\r\n    }\r\n\r\n    $(function(){\r\n        /*\r\n        * 查询表单级联数据拉取\r\n        */\r\n        $.get(\'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/get_biz_list\', function(data){\r\n\r\n            if(data.result){\r\n                var _html = \'\';\r\n                var list = data.data;\r\n                var tpl = $(\'#app_tpl\').html();\r\n                for (var i=0,len=list.length; i < len; i++){\r\n                    var item = list[i];\r\n                    _html += renderTpl(tpl, item)\r\n                }\r\n                $(\'#biz_id\').html(_html);\r\n\r\n                var biz_id = $("#biz_id").val();\r\n                select_ip(biz_id);\r\n                select_job(biz_id);\r\n            }else{\r\n                alert("获取失败")\r\n            }\r\n        }, \'json\')\r\n\r\n        //业务选择下拉绑定change事件\r\n        $("#biz_id").change(function(){\r\n            var biz_id = $("#biz_id").val();\r\n            select_ip(biz_id);\r\n            select_job(biz_id);\r\n        });\r\n    })\r\n\r\n</script>\r\n<script>//获取图表信息\r\n    $(function(){\r\n        initEStandLineChart({\r\n            url: \'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/chartdata\',\r\n            dataType: \'json\',\r\n            containerId: \'chart_1530772671783\'\r\n        });\r\n    });\r\n\r\n    function refresh_chart(obj){\r\n\r\n        var ip=$("#ip").find("option:selected").val();\r\n        var mounted=$("#selectIpForChart").find("option:selected").val();\r\n\r\n        initEStandLineChart({\r\n            url: \'')
        __M_writer(str(SITE_URL))
        __M_writer('diskInfo/chartdata\',\r\n            data:{\r\n                ip:ip,\r\n                mounted:mounted\r\n            },\r\n            dataType: \'json\',\r\n            containerId: \'chart_1530772671783\'\r\n        });\r\n    }\r\n</script>\r\n<script> //渲染图表\r\n    /*\r\n    * 渲染图表数据\r\n    */\r\n    function createEStandLineChart(conf){\r\n        var myChart = echarts.init(document.getElementById(conf.selector));\r\n        var legendData = []\r\n        for(var i=0; i < conf.data.series.length;i++){\r\n            legendData.push(conf.data.series[i].name)\r\n        }\r\n        myChart.setOption({\r\n            tooltip : {\r\n                trigger: \'axis\'\r\n            },\r\n            legend: {\r\n                y: \'bottom\',\r\n                data:legendData\r\n            },\r\n            toolbox: {\r\n                show : true,\r\n                feature : {\r\n                    mark : {show: true},\r\n                    dataView : {show: true, readOnly: false},\r\n                    magicType : {show: true, type: [\'bar\',\'line\']},\r\n                    restore : {show: true},\r\n                    saveAsImage : {show: true}\r\n                }\r\n            },\r\n            calculable : true,\r\n            xAxis : [\r\n                {\r\n                    type : \'category\',\r\n                    data : conf.data.xAxis\r\n                }\r\n            ],\r\n            yAxis : [\r\n                {\r\n                    type : \'value\',\r\n                    splitArea : {show : true}\r\n                }\r\n            ],\r\n            series : conf.data.series\r\n        });\r\n    }\r\n    function initEStandLineChart(conf){\r\n        $.ajax({\r\n            url: conf.url,\r\n            type: \'POST\',\r\n            data:conf.data,\r\n            dataType: conf.dataType,\r\n            success: function(res){\r\n                //获取数据成功\r\n                if (res.result){\r\n                    createEStandLineChart({\r\n                        selector: conf.containerId, // 图表容器\r\n                        data: res.data, // 图表数据\r\n                    });\r\n                }\r\n            }\r\n        })\r\n    }\r\n</script>\r\n<script>//自主开发功能\r\n    function getMounted(list){\r\n        $(\'#selectIpForChart\').empty();\r\n        for(var i=0;i<list.length;i++){\r\n\r\n            var html=\'\';\r\n            html=\' <option value="\'+list[i].Mounted+\'">\'+list[i].Mounted+\'</option>\'\r\n            $(\'#selectIpForChart\').append(html);\r\n        }\r\n    }\r\n    function getData(){\r\n        $.ajax({\r\n            url:\'')
        __M_writer(str(SITE_URL))
        __M_writer("diskInfo/getInfo',\r\n            success:function(data){\r\n                console.log(data)\r\n            }\r\n        })\r\n    }\r\n</script>\r\n</html>")
        return ''
    finally:
        context.caller_stack._pop_frame()


"""
__M_BEGIN_METADATA
{"filename": "D:/boco/project/lj/dev/dm/templates/dm/index.html", "uri": "dm/index.html", "source_encoding": "utf-8", "line_map": {"16": 0, "23": 1, "24": 72, "25": 72, "26": 228, "27": 228, "28": 247, "29": 247, "30": 270, "31": 270, "32": 285, "33": 285, "34": 319, "35": 319, "36": 351, "37": 351, "38": 363, "39": 363, "40": 447, "41": 447, "47": 41}}
__M_END_METADATA
"""
